import {
    Card,
    Breadcrumb,
    Form,
    Button,
    Radio,
    Input,
    Upload,
    Space,
    Select,
    message
} from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { Link, useNavigate } from 'react-router-dom'
import './index.scss'

import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'

import { createArticleAPI, getArticleDetailAPI, editArticleDetailAPI } from '@/apis/articles'
import { useEffect, useState } from 'react'
import { useChannel } from '@/hooks/useChannel'

import { useSearchParams } from 'react-router-dom'
const { Option } = Select

const Publish = () => {
    const navigate = useNavigate()
    // 获取频道列表
    const { channelList } = useChannel()
    // 发布文章
    const onFinish = async (formValue) => {
        // 校验封面类型 imageType 是否和实际的图片列表 imageList 数量是相等的
        if (imageList.length !== imageType) return message.warning('当前封面类型和图片数量不匹配')

        const { channel_id, content, title } = formValue
        // 根据接口文档的格式处理数据
        const reqData = {
            channel_id,
            content,
            title,
            type: 1,
            cover: {
                type: imageType,    //封面模式
                images: imageList.map(item => {
                    // 编辑的时候需要做处理
                    // 这里的url处理逻辑只是在新增时候的逻辑
                    if (item.response) {
                        return item.response.data.url
                    } else {
                        return item.response.data.url
                    }
                })
            }
        }
        if (articleId) {
            await editArticleDetailAPI({ ...reqData, id: articleId })
        } else {
            await createArticleAPI(reqData)
        }
        // articleId ?  : 
        message.success(articleId ? '更新文章成功' : '发布文章成功')
        navigate('/article')
    }

    // 封面上传
    const [imageList, setImageList] = useState([])
    const onChange = (val) => {
        setImageList(val.fileList)
    }

    // 切换图片封面类型
    const [imageType, setImageType] = useState(0)
    const onTypeChange = (e) => {
        setImageType(e.target.value)
        console.log("切换了封面", imageType)
    }


    /* 回填数据 */
    const [searchParams] = useSearchParams()
    const articleId = searchParams.get('id')

    /* 获取组件实例 */
    const [form] = Form.useForm()

    useEffect(() => {
        const getArticleDetail = async () => {
            const { data } = await getArticleDetailAPI(articleId)
            const { cover } = data
            // . 回填表单数据
            form.setFieldsValue({ ...data, type: cover.type })

            /* 回填图片列表 */
            setImageType(cover.type)
            // 封面list
            setImageList(cover.images.map(url => {
                return { url }
            }))
        }
        articleId && getArticleDetail()
    }, [articleId, form])


    return (
        <div className="publish">
            <Card
                title={
                    <Breadcrumb items={[
                        { title: <Link to={'/'}>首页</Link> },
                        { title: articleId ? '编辑文章' : '发布文章' },
                    ]}
                    />
                }
            >

                <Form
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ type: 0 }}
                    onFinish={onFinish}
                    form={form}
                >
                    {/* 标题 */}
                    <Form.Item
                        label="标题"
                        name="title"
                        rules={[{ required: true, message: '请输入文章标题' }]}
                    >
                        <Input placeholder="请输入文章标题" style={{ width: 400 }} />
                    </Form.Item>

                    {/* 频道 */}
                    <Form.Item
                        label="频道"
                        name="channel_id"
                        rules={[{ required: true, message: '请选择文章频道' }]}
                    >
                        <Select placeholder="请选择文章频道" style={{ width: 400 }}>
                            {channelList.map(item => <Option value={item.id} key={item.id}>{item.name}</Option>)}
                        </Select>

                    </Form.Item>

                    {/* 封面 */}
                    <Form.Item label="封面">
                        <Form.Item name="type">
                            <Radio.Group onChange={onTypeChange}>
                                <Radio value={1}>单图</Radio>
                                <Radio value={3}>三图</Radio>
                                <Radio value={0}>无图</Radio>
                            </Radio.Group>
                        </Form.Item>
                        {imageType > 0 && <Upload
                            listType="picture-card"
                            showUploadList
                            name="image"
                            action={'http://geek.itheima.net/v1_0/upload'}
                            onChange={onChange}
                            maxCount={imageType}
                            fileList={imageList}
                        >
                            <div style={{ marginTop: 8 }}>
                                <PlusOutlined />
                            </div>
                        </Upload>}
                    </Form.Item>

                    {/* 内容 */}
                    <Form.Item
                        label="内容"
                        name="content"
                        rules={[{ required: true, message: '请输入文章内容' }]}>
                        {/* 富文本编辑器 */}
                        <ReactQuill
                            className="publish-quill"
                            theme="snow"
                            placeholder="请输入文章内容"
                        />
                    </Form.Item>


                    {/* 发布按钮 */}
                    <Form.Item wrapperCol={{ offset: 4 }}>
                        <Space>
                            <Button size="large" type="primary" htmlType="submit">
                                发布文章
                            </Button>
                        </Space>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}

export default Publish